<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <Top :addTodo="addTodo"></Top>
        <List :list="list" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></List>
        <Bottom :list="list" :checkAll="checkAll" :clearDone="clearDone"></Bottom>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 总结TodoList案例
 * 1.组件化编程流程
 *  - 拆分静态组件: 组件要按照功能拆分,命名不要与HTML元素冲突
 *  - 实现动态组件: 考虑好数据的存放位置,数据是一个组件在用还是多个组件在用
 *     - 一个组件在用: 放在组件自身即可
 *     - 一些组件在用:放在他们共同的组件上 (状态提升)
 *  - 从绑定事件开始
 * 2. props适用于
 *   - 父组件 ===> 子组件 通信
 *   - 子组件 ===> 父组件通信 (要求先给子组件一个函数)
 * 3. 适用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的.
 * 4. props若传过来的是对象类型的值,修改对象的属性时Vue不会保存,但是不推荐
 */
import Top from "./Top";
import List from "./List";
import Bottom from "./Bottom";
import {nanoid} from 'nanoid'
export default {
  name: "TodoLists",
  components:{Top,List,Bottom},
  data(){
    return {
      list:[
          {id:nanoid(),title:"抽烟",done:false},
          {id:nanoid(),title:"喝酒",done:true},
          {id:nanoid(),title:"烫头",done:false},
      ]
    }
  },
  activated() {
    console.log("待办组件激活")
  },
  deactivated() {
    console.log("待办组件失活")
  },
  methods:{
    checkTodo(id,e){
      this.list.find(i=>i.id===id).done=e.target.checked;
    },
    deleteTodo(id){
      let index=this.list.findIndex(i=>i.id===id);
     this.list.splice(index,1)
    },
    addTodo(title){
      this.list.unshift({id:nanoid(),title,done:false})
    },
    checkAll(e){
      this.list.forEach(item=>{
        item.done=e.target.checked
      })
    },
    clearDone(){
      this.list=this.list.filter(item=>!item.done)
    }
  }
}
</script>

<style scoped>

</style>
